<template>
	<view class="ver " :class="{'font-text-color-main_body':theme==1,'font-color-white':theme!=1}">
		<view id="emptyLayout" class="match-height match-width ver hor-center fixed" v-if="positionMode==1"
			:style="{'margin-top':offsetTop}">
			<view class="ver ver-center">
				<!-- <image style="width: 160rpx; height: 160rpx;" mode="scaleToFill" src="http://shopqiniu.luozisong.top/img_load_empty.png"></image> -->
				<image style="width: 160rpx; height: 160rpx;" mode="scaleToFill" src="~@/static/img/img_load_empty.png">
				</image>
				<view v-if="emptyStatus==0" class="font14 mg-t-40 ">紧张加载中</view>
				<view v-if="emptyStatus==1" class="font14 mg-t-40 ">别紧张，试试看刷新页面</view>
				<view v-if="emptyStatus==2" class="font14 mg-t-40 ">{{emptyHint}}</view>
				<view class="corner10 bg-main font-color-white pd-lr25 pd-tb5 mg-t-40" @click="retry()"
					v-if="emptyStatus!=0">{{buttonText}}
				</view>
				<view style="height: 300rpx;"></view>
			</view>
		</view>
		<view id="emptyLayout" class="abs" v-if="positionMode==2" :style="{'margin-top':offsetTop}">
			<view class="ver ver-center">
				<!-- <image style="width: 160rpx; height: 160rpx;" mode="scaleToFill" src="http://shopqiniu.luozisong.top/img_load_empty.png"></image> -->
				<image style="width: 160rpx; height: 160rpx;" mode="scaleToFill" src="~@/static/img/img_load_empty.png">
				</image>
				<view v-if="emptyStatus==0" class="font14 mg-t-40 ">紧张加载中</view>
				<view v-if="emptyStatus==1" class="font14 mg-t-40 ">别紧张，试试看刷新页面</view>
				<view v-if="emptyStatus==2" class="font14 mg-t-40 ">{{emptyHint}}</view>
				<view class="corner10 bg-main font-color-white pd-lr25 pd-tb5 mg-t-40" @click="retry()"
					v-if="emptyStatus!=0">{{buttonText}}
				</view>
			</view>
		</view>
		<view id="emptyLayout" class="" v-if="positionMode==3" :style="{'margin-top':offsetTop}">
			<view class="ver ver-center">
				<!-- <image style="width: 160rpx; height: 160rpx;" mode="scaleToFill" src="http://shopqiniu.luozisong.top/img_load_empty.png"></image> -->
				<image style="width: 160rpx; height: 160rpx;" mode="scaleToFill" src="~@/static/img/img_load_empty.png">
				</image>
				<view v-if="emptyStatus==0" class="font14 mg-t-40 ">紧张加载中</view>
				<view v-if="emptyStatus==1" class="font14 mg-t-40 ">别紧张，试试看刷新页面</view>
				<view v-if="emptyStatus==2" class="font14 mg-t-40 ">{{emptyHint}}</view>
				<view class="corner10 bg-main font-color-white pd-lr25 pd-tb5 mg-t-40" @click="retry()"
					v-if="emptyStatus!=0">{{buttonText}}
				</view>
			</view>
		</view>
	</view>


</template>
<style>
	.abs {
		position: absolute;
		z-index: 200;
		left: 0px;
		top: 0px;
	}

	.fixed {
		position: fixed;
		z-index: 200;
		left: 0px;
		top: 0px;
	}
</style>
<script>
	export default {
		name: "emptyLayout",
		//属性
		props: {
			// 属性名称: {
			// 	type: String, //属性类型
			// 	value: "值"
			// },
			// ......
			emptyStatus: {
				default: 1 //0.加载中提示 1.错误提示 2.空提示
			},
			emptyHint: {
				type: String,
				default: "暂时还没有数据哦"
			},
			buttonText: {
				type: String,
				default: "刷新"
			},
			positionMode: {
				default: 2 //1.fixed模式 2.abs模式 3.不悬浮
			},
			offsetTop: {
				default: 0 //1.顶部偏移量
			},
			theme: {
				default: 1 //1.白色主题  2.黑色主题
			},

		},
		//组件生命周期
		created: function(e) {
			// console.log(this.emptyStatus)

		},
		methods: {
			retry: function() {
				// this.$emit("retry","bb")//第二个为参数
				this.$emit("retry")
			},
			// getMode() {
			// 	switch (this.positionMode) {
			// 		case 1:
			// 			return "position: fixed;z-index: 200;top: 0px";
			// 		case 2:
			// 			return "position: absolute;z-index: 200;top: 0px";
			// 		case 3:
			// 			return "";
			// 	}
			// },

			abs() {

			}
		}
	}
</script>

<style>
</style>